<template>
  <div>
    <section class="cms-pictrues-itmes clearfix">
      <el-upload class="cms-pictrue-upload"
                 :action="uploadUrl"
                 :data="data"
                 :name="name"
                 :on-success="onSuccess"
      >
        <i class="el-icon-plus"></i>
        <img :src="getImageUrl(src.path)" alt="" class="cms-pic-img">
      </el-upload>
      <el-input type="textarea" class="cms-desc" v-model="src.name" placeholder="图片集描述" v-if="isShowDesc"></el-input>
      <i class="cms-delete-little iconfont icon-shanchu1" @click="delFileList(index)"></i>
    </section>

  </div>
</template>

<script>
  import {getRand} from "@/untils/random";
  import {signParams} from "@/untils/sign";
  import api from "@/api/api";

  var rand = getRand();
  export default {
    name: "cms-pictrues-items",
    props: {
      //索引
      index: {
        type: Number,
        default: 0
      },
      src: {
        type: Object,
        default: function () {
          return {
            name: '',
            path: '',
          }
        }
      },
      uploadName: {
        type: String,
        default: "上传"
      },
      //提交地址,默认为/upload/o_upload
      action: {
        type: String,
        default: ""
      },
      //是否支持多文件上传
      multiple: {
        type: Boolean,
        default: false
      },
      //文件提交name值
      name: {
        type: String,
        default: "uploadFile"
      },
      //上传路径
      uploadPath: {
        type: String,
        default: ""
      },
      isShowDesc: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        uploadUrl: this.$store.state.sys.baseUrl + (this.action == "" ? this.$api.bsaeUpload : this.action),
        params: {
          appId: process.env.appId,
          sessionKey: localStorage.getItem("sessionKey"),
          type: "image",
          nonceStr: rand,
          mark: false,
          uploadPath: this.uploadPath
        },

        data: {},
        fileList: [],
        uploading: false,
        percentage: 0,
        status: '',
        fileName: '',
      };
    },
    methods: {
      getImageUrl(path) {
        if (path.indexOf("http") >= 0) {
          return path;
        } else {
          let url = this.$store.state.sys.baseUrl
          let repeat = url.substring(url.lastIndexOf('/'))
          if (path.startsWith(repeat)) {
            url = url.replace(repeat, '')
          }
          return url + path;
        }
      },
      getUrl() {//处理图片显示路径
        let url = this.$store.state.sys.baseUrl;
        let http = url.substring(0, url.indexOf("//") + 2);
        url = url.substring(url.indexOf("//") + 2, url.length);
        url = url.substring(0, url.indexOf("/"));
        return http + url;
      },
      onProgress(event, file, fileList) {
        this.status = '';
        this.uploading = true;
        this.percentage = parseInt(event.percent);
      },
      delFileList(index) {
        this.$emit('delete', index);
      },
      onSuccess(response, file, fileList) {
        if (response.code == '200' && response.body != '') {
          this.status = 'success';
          this.src.path = response.body.uploadPath;
        } else {
          this.status = 'exception';
          this.src.path = '';//清除路径
          this.src.name = '';//清除描述
        }
        setTimeout(() => {
          this.uploading = false;
          this.fileName = '';
          this.percentage = 0;
        }, 500);

      },
      onError(err, file, fileList) {
        this.errorMessage("上传失败");
      },
    },
    watch: {
      src: {
        handler(curVal, oldVal) {
          this.$emit('getItems', curVal, this.index);
        },
        deep: true
      }
    },
    created() {
      this.data = signParams(this.params, process.env.appKey);
    }
  };
</script>

<style scope lang='scss'>
  .cms-pictrues-itmes {

    margin-top: 10px;
    display: flex;
    align-items: center;
  }

  .cms-desc {
    float: left;
    width: 185px;
    height: 80px;
    line-height: 80px;
    border-radius: 4px;

  }

  .cms-pic-img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
  }

  .cms-pictrue-upload {
    width: 144px;
    height: 80px;
    float: left;
    position: relative;
    line-height: 80px;
    text-align: center;
    border: 1px solid #d8dce5;
    border-radius: 4px;
    margin-right: 10px;

    .el-upload {
      width: 100%;
      height: 100%;
    }

    .el-icon-plus {
      font-size: 26px;
      color: #d8dce5;
    }
  }


  .file-gray {
    font-size: 12px;
    line-height: 1;
    padding-top: 6px;
    color: #acb5bb;
  }


  .cms-delete-little {
    cursor: pointer;
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #ff8b53;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    margin-left: 10px;
    float: left;
  }

</style>
